<template>
  <div class="resident-info">
    <el-tabs v-model="activeName" @tab-click="handleTabClick" style="width: 100%;">
      <el-tab-pane label="基本信息" name="basic-info">
        <BasicInfo v-if="activeName=='basic-info'"/>
      </el-tab-pane>
      <el-tab-pane label="签约信息" name="contract-info">
        <ContractInfo v-if="activeName=='contract-info'"/>
      </el-tab-pane>
      <el-tab-pane label="健康档案" name="health-record">
        <HealthRecord v-if="activeName=='health-record'"/>
      </el-tab-pane>
      <el-tab-pane label="诊疗记录" name="medical-records">
        <MedicalRecords v-if="activeName=='medical-records'"/>
      </el-tab-pane>
      <el-tab-pane label="转诊记录" name="referral-records">
        <ReferralRecords v-if="activeName=='referral-records'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script >
import BasicInfo from './BasicInfo/BasicInfo.vue';
import ContractInfo from './ContractInfo/ContractInfo.vue';
import HealthRecord from './HealthRecord/HealthRecord.vue';
import MedicalRecords from './MedicalRecords/MedicalRecords.vue';
import ReferralRecords from './ReferralRecords/ReferralRecords.vue';

export default {
  components: {
    BasicInfo,
    ContractInfo,
    HealthRecord,
    MedicalRecords,
    ReferralRecords
  },
  data() {
    return {
      activeName: 'basic-info'
    };
  },
  methods: {
    handleTabClick(tab, event) {

    }
  }
};
</script>


<style scoped>
.resident-info {
  padding: 20px;
}

</style>

